<template>
	<view class="mine-page">
		<CustomNav :isBack="false" :topBgColor="topBgColor" title="我的"></CustomNav>
		<view class="mine-block">
			<view class="user-item" v-if="!user.mobile">
				<image :src="imgStorage+'/mine/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.png'" class="photo"></image>
				<button class="user-name" hover-class="none" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">点击登录</button>
			</view>
			<view class="user-item" v-else>
				<image :src="backendStorage+user.faceUrl" class="photo"></image>
				<view class="user-name" @click="navigate('/page_pack/authentication/authentication')">{{user.name}}
				</view>
			</view>
			<view class="news-block">
				<view class="news-item" v-for="item in newsList" :key="item.id">
					<view class="news-title LENGKU">{{item.title}}</view>
					<view class="news-content">{{item.content}}</view>
					<view class="small-btn normal">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="info-block">
			<view class="menu-block">
				<view class="menu-info">
					<view class="menu-item" v-for="item in menuList" :key="item.id" @click="navigate(item.path)">
						<image :src="imgStorage+item.icon" class="menu-icon"></image>
						<view class="menu-name">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="menu-block">
				<view class="menu-title">发票管理</view>
				<view class="menu-info">
					<view class="menu-item" v-for="item in menuList1" :key="item.id" @click="navigate(item.path)">
						<image :src="imgStorage+item.icon" class="menu-icon"></image>
						<view class="menu-name">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="exit-item" @click="logout" v-if="user.mobile">
				<image class="exit-icon" :src="imgStorage+'/mine/15.png'">
				</image>
				<view class="exit-name">退出登录</view>
				<view class="iconfont icon-a-gengduo2"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStorage,
		removeStorage,
		setStorage
	} from '@/util/auth.js';
	import {
		getPhone,
		getUserInfo,
		saveUserInfo,
		logoutApi
	} from '@/api/user.js';
	import {
		uploadFile
	} from '@/api/file.js';
	import {
		getLoginUserFwJoinApi
	} from '@/api/rent_payment.js'
	export default {
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				newsList: [{
					id: 1,
					title: '正在办理',
					content: '您的续租申请审核已通过',
					text: '去续签',
					path: ''
				}],
				menuList: [
					// {
					// 	id: 1,
					// 	icon: '/mine/1.png',
					// 	name: '实名信息',
					// 	path: '/page_pack/my_pages/certification/certification'
					// },
					{
						id: 2,
						icon: '/mine/2.png',
						name: '承租人信息',
						path: '/page_pack/my_pages/tenant_information/tenant_information'
					},
					{
						id: 3,
						icon: '/mine/3.png',
						name: '房屋信息',
						path: '/page_pack/my_pages/house_info/house_info'
					},
					{
						id: 4,
						icon: '/mine/4.png',
						name: '我的续租',
						path: '/page_pack/my_pages/relet/relet'
					},
					{
						id: 5,
						icon: '/mine/5.png',
						name: '房屋缴费记录',
						path: '/page_pack/my_pages/pay_record/rent'
					},
					{
						id: 6,
						icon: '/mine/6.png',
						name: '物业缴费记录',
						path: '/page_pack/my_pages/pay_record/property'
					},
					{
						id: 7,
						icon: '/mine/7.png',
						name: '保证金缴纳',
						path: '/page_pack/bond/index'
					},
					{
						id: 8,
						icon: '/mine/8.png',
						name: '房租费用明细',
						path: '/page_pack/rent_payment/rent_calculator'
					},
					{
						id: 9,
						icon: '/mine/9.png',
						name: '我的报修',
						path: '/page_pack/my_pages/my_fault/index'
					},
					{
						id: 10,
						icon: '/mine/10.png',
						name: '投诉举报',
						path: '/page_pack/complaint/list'
					},
					{
						id: 11,
						icon: '/mine/11.png',
						name: '故障维修',
						path: '/page_pack/fault/fault'
					}
				],
				menuList1: [{
						id: 1,
						icon: '/mine/12.png',
						name: '发票申请',
						path: '/page_pack/invoice/invoice'
					},
					{
						id: 2,
						icon: '/mine/13.png',
						name: '开票历史',
						path: '/page_pack/invoice/history'
					},
					{
						id: 3,
						icon: '/mine/14.png',
						name: '抬头管理',
						path: '/page_pack/invoice/manage'
					},
				],
				user: {}
			}
		},
		methods: {
			getPhoneNumber(e) {
				if (!e.detail.code) {
					this.showToast('您取消了授权');
					return;
				}
				const mobileCode = e.detail.code;
				wx.login({
					success: (login) => {
						uni.showLoading({
							title: '登录中',
							mask: true
						})
						const code = login.code;
						getPhone({
							mobileCode: mobileCode,
							code: code,
						}).then((res) => {
							this.showToast('登录成功', () => {
								this.$store.commit('user/SET_TOKEN', res.token);
								this.user = res.user
								this.getUser();
								this.updateSelectInfo();
							}, 1000)
						});
					}
				});
			},
			getUser() {
				getUserInfo().then((res) => {
					this.user = res
					this.$store.commit('user/SET_USER', res);
					if (this.path) {
						let url = this.path
						uni.redirectTo({
							url: url
						})
					}
				});
			},
			updateSelectInfo() {
				getLoginUserFwJoinApi().then((res) => {
					if (res) {
						setStorage('selectInfo', res[0])
					}
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: `确定要退出登录吗？`,
					confirmColor: '#FF2F34',
					success: (res) => {
						if (res.confirm) {
							logoutApi().then(() => {
								removeStorage('token');
								removeStorage('user');
								this.user = {}
								uni.switchTab({
									url: '/pages/index/index'
								})
							})
						}
					}
				})
			}
		},
		onShow() {
			const user = getStorage('user');
			if (user) {
				this.user = user
			}
			if (getStorage('token')) {
				this.getUser();
			} else {
				removeStorage('user')
				this.user = {}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		overflow: hidden;
		height: 100%;
		background-color: #f8f8f8;

		.mine-block {
			width: 100%;
			height: 450rpx;
			background: url('https://suzhouqu-static-1306862033.cos.ap-chengdu.myqcloud.com/suzhouHousesLease/uniapp/mine/mine_bg.png') no-repeat center;
			background-size: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding: 30rpx;



			.user-item {
				display: flex;
				align-items: center;
				padding-top: 120rpx;

				.photo {
					width: 140rpx;
					height: 140rpx;
					margin-right: 20rpx;
					border-radius: 50%;
					background-color: #f8f8f8;
				}

				.user-name {
					font-size: 34rpx;
					font-weight: bold;
					background: none;
					margin: 0;
					border-radius: 0;
					line-height: normal;
					padding: 0;
					color: #fff;
					margin-left: 20rpx;

					&::after {
						border: none;
					}
				}
			}

			.news-block {
				width: calc(100% - 60rpx);
				background: #fff;
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
				margin-top: 440rpx;
				position: absolute;

				.news-item {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.news-title {
						font-size: 40rpx;
						color: $theme-color;
						width: 165rpx;
						font-weight: normal;
					}

					.news-content {
						font-size: 26rpx;
						width: calc(100% - 310rpx);
						text-align: start;
					}

					.small-btn {
						width: 140rpx;
					}
				}
			}
		}

		.info-block {
			padding: 30rpx;
			margin-top: 30rpx;

			.menu-block {
				background: #fff;
				padding: 30rpx 0 0 0;
				border-radius: 30rpx;
				margin-top: 30rpx;

				.menu-title {
					font-size: 34rpx;
					font-weight: bold;
					margin: 0 20rpx 30rpx 30rpx;
				}

				.menu-info {
					display: flex;
					flex-wrap: wrap;

					.menu-item:nth-child(4n) {
						margin-right: 0;
					}

					.menu-item {
						width: calc((100% - 45rpx)/4);
						margin-right: 15rpx;
						margin-bottom: 40rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.menu-icon {
							width: 60rpx;
							height: 60rpx;
							margin-bottom: 10rpx;
						}

						.menu-name {
							font-size: 26rpx;
						}
					}
				}
			}

			.exit-item {
				width: 100%;
				background: #fff;
				border-radius: 8px;
				height: 130rpx;
				display: flex;
				align-items: center;
				padding: 30rpx;
				margin-top: 30rpx;

				.exit-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				.exit-name {
					flex-grow: 1;
					font-size: 30rpx;
				}

				.iconfont {
					color: #767676;
					font-size: 32rpx;
				}
			}
		}
	}
</style>